<template>
  <view>
    <ContainerTemplate
      v-model:isShowContainer="b_isShowContainer"
      :container-type="containerType"
      :container-attr="containerAttr"
      :content-type="''"
      @do-operation="onDoOperation"
    >
      <IconPickerMain
        v-model:icon="bind_icon"
        v-model:layoutConfig="bind_layoutConfig"
      ></IconPickerMain>
    </ContainerTemplate>
    <gd-input
      v-if="checkNotIsVirtualTrigger"
      v-model="sync_icon"
      readonly
      :size="size"
      :style="{ width: width,textAlign:'right' }"
      placeholder="尚未选择图标"
      @clear="onClear"
    >
      <template #append>
        <view @click="onClickOpen" style="padding:0;cursor:pointer;height:100%;width:100%;display: flex;justify-content:center;align-items:center;align-content:center;" title="点我选择图标">
          <gd-icon
            :icon-name="sync_icon"
            :size="iconSize"
            v-if="sync_icon"
            style="width:100%;padding:0;"
          ></gd-icon>
          <view v-else>{{ "点我选择图标" }}</view></view
        >
      </template>
      <!-- <template #append>
        <gd-button type="primary" @click="onClickOpen" :size="size">
          选择图标
        </gd-button>
      </template> -->
    </gd-input>
  </view>
</template>
<script setup>
import ContainerTemplate from "../gd-service/gd-container-service/container-template.vue";
import { computed, watch, ref } from "vue";
import IconPickerMain from "./components/icon-picker-main.vue";
import { emit } from "process";
const props = defineProps({
  containerType: {
    type: String,
    default: "Dialog",
  },
  isShowContainer: {
    type: Boolean,
    default: false,
  },
  containerAttr: {
    type: Object,
    default: () => ({
      width: "60%",
      title: "图标选择器",
    }),
  },
  /* contentType: {
    type: String,
    default: "",
    validator: (val) => {
      return ["Form", "Table", ""].includes(val);
    },
  }, */
  modelValue: {
    type: String,
    default: "",
  },
  layoutConfig: {
    type: Object,
    default: () => ({
      /**
       * 布局类型
       * "Simple" 简化版没有左树、"Advance" 高级版有左树
       */
      type: "Advance",
      /**
       * 收藏夹分类
       * "build-in"是内置icon: pc的el-icon
       */
      favClassify: ["build-in", "material-symbols"],
      maxFavCacheNum: 5,
    }),
  },
  virtualTriggerShow: {
    type: [Object, Boolean],
    default: () => null,
  },
  size: {
    type: String,
    default: "default",
    validator: (val) => {
      return ["large", "default", "small"].includes(val);
    },
  },
  width: {
    type: String,
    default: "300px",
  },
});
const emits = defineEmits([
  "do-operation",
  "update:isShowContainer",
  "update:modelValue",
  "update:layoutConfig",
  "update:virtualTriggerShow",
]);
const tempICon = ref(props.modelValue);
const bind_icon = computed({
  get() {
    return tempICon.value;
  },
  set(val) {
    tempICon.value = val;
  },
});
const sync_icon = computed({
  get() {
    return props.modelValue;
  },
  set(val) {
    emits("update:modelValue", val);
  },
});
/**
 * 显示策略1:按钮点击出现弹窗
 */
const bind_isShowContainer = computed({
  get() {
    return props.isShowContainer;
  },
  set(value) {
    if (value) {
      tempICon.value = props.modelValue;
    }
    emits("update:isShowContainer", value);
  },
});
/**
 * 显示策略2:虚拟触发出现弹窗
 */
const bind_virtualTriggerShow = computed({
  get() {
    return props.virtualTriggerShow;
  },
  set(value) {
    if (value) {
      tempICon.value = props.modelValue;
    }
    emits("update:virtualTriggerShow", value);
  },
});
const checkNotIsVirtualTrigger = computed(() => {
  return typeof props.virtualTriggerShow !== "boolean";
});
/**
 * 显示策略入口
 */
const b_isShowContainer = computed({
  get() {
    if (checkNotIsVirtualTrigger.value) {
      return bind_isShowContainer.value;
    } else {
      return bind_virtualTriggerShow.value;
    }
  },
  set(value) {
    if (checkNotIsVirtualTrigger.value) {
      return (bind_isShowContainer.value = value);
    } else {
      return (bind_virtualTriggerShow.value = value);
    }
  },
});
const bind_layoutConfig = computed({
  get() {
    return props.layoutConfig;
  },
  set(val) {
    emits("update:layoutConfig", val);
  },
});
const iconSize = computed(() => {
  const sizeMapping = {
    large: "28px",
    default: "24px",
    small: "20px",
  };
  return sizeMapping[props.size];
});
const onDoOperation = (params) => {
  if (params.metaItem["key"] === "buildInContainerSubmitBtn") {
    tempICon.value = bind_icon.value;
    emits("update:modelValue", bind_icon.value);
    bind_isShowContainer.value = false;
    b_isShowContainer.value = false;
  }
};
const onClickOpen = () => {
  console.log("弹窗显示");
  b_isShowContainer.value = true;
};
const onClear = () => {
  emits("update:modelValue", "");
};
</script>
